<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2025-09-19 14:02:08
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-19 15:31:18
-->
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            cartoon
        </title>
        <style>
            .bg{
                width: 100%;
                height: 100vh;
                position: relative;
                
            }
            .wuku   {
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: absolute;
                left: 5%;
                bottom: 10%;
                
            }
            .zhu   {
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: absolute;
                left: 20%;
                bottom: 30%;
            }
            .sha  {
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: absolute;
                left: 40%;
                bottom: 10%;
            }
            .shifu   {
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: absolute;
                left: 20%;
                bottom: 10%;
            }
            .wuku>img{
                height: 180px;
                width: 1600px;
                animation-name:kfwuku;
                animation-duration:1s;
                animation-iteration-count: infinite;
                animation-timing-function: steps(8);
                
                
            }
            .zhu>img{
                height: 180px;
                width: 1600px;
                animation-name:kfzhu;
                animation-duration:1s;
                animation-iteration-count: infinite;
                animation-timing-function: steps(8);
            }
            .sha>img{
                height: 180px;
                width: 1600px;
                animation-name:kfsha;
                animation-duration:1s;
                animation-iteration-count: infinite;
                animation-timing-function: steps(8);
            }
            .shifu>img{
                height: 180px;
                width: 1600px;
                animation-name:kfshifu;
                animation-duration:1s;
                animation-iteration-count: infinite;
                animation-timing-function: steps(8);
            }
            .bg>img{
                height: 786px;
                width: 2000px;
                animation-name:kfbg;
                animation-duration:5s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-direction: reverse;
            }
            @keyframes kfwuku{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1600px;
                }
            }
             @keyframes kfzhu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1600px;
                }
            }
             @keyframes kfsha{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1600px;
                }
            }
             @keyframes kfshifu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1600px;
                }
            }
            @keyframes kfbg{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -20px;
                }
            }
        </style>
    </head>
    <body >
        <div class="bg">
            <img src="./山.jpg">
        </div>
        <div class="wuku">
            <img src="./猴.png">
        </div>
        <div class="zhu">
            <img src="./猪.png">
        </div>
        <div class="sha">
            <img src="./演员.png">
        </div>
        <div class="shifu">
            <img src="./唐僧.png">
        </div>
    </body>
 </html>
